import React from 'react'
import { Form, Button, Space, Input } from "antd";
import { ExclamationCircleFilled } from "@ant-design/icons";
import TheTable from "@/components/TheTable";
import ThePagination from "@/components/ThePagination";
import TheQueryForm from '@/components/TheQueryForm';
import TheImage from "@/components/TheImage";
import TheButton from "@/components/TheButton";
import TheDialog from "@/components/TheDialog";
import GoBack from "@/components/TheGoBack";
import { goodsEvaluationPage,goodsEvaluationReply } from '@/request/storeBackManage/goodsManage/centerGoodsList';
import { getDateTime3 } from '@/utils/getDate'
import store from "@/store/store"
import _ from 'lodash'

const { TextArea } = Input;

export default class Evaluate extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      columns: [
        {
          title: "用户昵称",
          dataIndex: "memberName",
          key: "memberName",
        },
        {
          title: "评论时间",
          dataIndex: "createTime",
          key: "createTime",
        },
        {
          title: "商品规格",
          dataIndex: "skuInfo",
          key: "skuInfo",
          render: (text, record) => {
            let skuInfo = JSON.parse(record.skuInfo)
            let label = skuInfo.skuAttribute.map(v => v.value)
            return label.join(',');
          }
        },
        {
          title: "评价类型",
          dataIndex: "evaluationType",
          key: "evaluationType",
          render: (text, record) => {
            let label = ''
            switch (record.evaluationType) {
              case 'H':
                label = '好评'
                break;
              case 'Z':
                label = '中评'
                break;
              case 'C':
                label = '差评'
                break;
            }
            return label;
          }
        },
        {
          title: "评价内容",
          dataIndex: "evaluationContent",
          key: "evaluationContent",
          render: (text, record) => {
            return <div className="p-white-space" style={{ width: 200 }}>{record.evaluationContent}</div>
          }
        },
        {
          title: "评论图片",
          dataIndex: "images",
          key: "images",
          render: (text, render) => {
            let images = render.images ? _.toString(render.images).split(',') : []
            images = images.map((v, i) => {
              return <TheImage src={v} width={80} height={80} />
            })
            return <div style={{ display: 'flex', columnGap: 5 }}>
              {images}
            </div>
          }
        },
        {
          title: "操作",
          render: (text, render) => {
            return (
              <div>
                {!parseInt(render.isReply) && <TheButton onClick={() => this.replyEvaluation(render.goodsEvaluationId)}>回复评价</TheButton>}
              </div>
            );
          },
        },
      ],
      dataSource: [],
      form_show: true,
      searchOption: [
        { field: 'time', label: '评论时间 ', type: 'RangePicker' },
        {
          field: 'evaluationType',
          label: '评价类型',
          placeholder: '全部',
          type: 'Select',
          options: [{ value: 'H', label: '好评' }, { label: "中评", value: "Z" }, { label: "差评", value: "C" },],
        },
      ],
      queryForm: {},
      pageData: { pageNo: 1, pageSize: 10 },
      total: 1,
      replyEvaluationVisible: false,
      goodsId: '',//商品id
      goodsEvaluationId: '',//评论id
    }
  }
  componentDidMount() {
    const { id } = this.props.match.params
    if (id) { this.setState({ goodsId: id }) }
    this.getData(this.state.queryForm)
  }
  // 获取数据
  getData = (values) => {
    if (values && !_.isEmpty(values.time)) {
      values.createTimeStart = getDateTime3(values.time[0]) + ' 00:00:00'
      values.createTimeEnd = getDateTime3(values.time[1]) + ' 23:59:59'
      delete (values.time)
    }
    let { pageData: { pageNo, pageSize }, queryForm } = this.state
    console.log(this.state.pageData);
    this.setState({
      queryForm: values === undefined ? queryForm : { ...values }
    }, async () => {
      const params = { pageNo, pageSize, ...this.state.queryForm, goodsId: this.state.goodsId }
      console.log(params, 'evaluationType');
      store.dispatch({
        type: 'SaveSearchValues',
        data: {
          pathName: 'evaluateList',
          ...params
        }
      })
      let res = await goodsEvaluationPage({ ...params })
      if (res.code === 0 && res.data) {
        this.setState({
          dataSource: res.data,
          pageData: {
            pageNo: res.pageNo,
            pageSize: res.pageSize
          },
          total: res.totalCount
        })
      }
    })
  }
  // 回复评价
  replyEvaluation = async (goodsEvaluationId) => {
    this.setState({
      replyEvaluationVisible: true,
      goodsEvaluationId
    })
  }
  // 取消关闭评价弹窗
  replyEvaluationCancel = () => {
    this.setState({
      replyEvaluationVisible: false,
      goodsEvaluationId: ''
    })
  }
  // 保存回复评价
  replyEvaluationSave = async (value) => {
    let res = await goodsEvaluationReply({ goodsEvaluationId: this.state.goodsEvaluationId, ...value })
    if (res.code === 0) {
      this.replyEvaluationCancel()
      React.$message({ type: 'info', content: '回复成功' })
      this.getData()
    }

  }
  // 搜素
  onFormSearch = (values) => {
    console.log(values, ';;;;;;;;;');
    this.setState({ pageData: { pageNo: 1, pageSize: 10 } }, () => { this.getData(values) })
  }
  // 搜索重置
  onReset = () => {
    this.setState({
      queryForm: {}
    }, () => { this.pageChange(1, 10) })
  }
  // 切换分页
  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: { pageNo, pageSize }
    }, () => { this.getData() })
  };
  render() {
    const { form_show, searchOption, dataSource, columns, pageData: { pageNo, pageSize }, total, replyEvaluationVisible } = this.state
    return (
      <div className={'p-layout-box'}>
        <GoBack history={this.props.history} title={"查看评论"} />
        <div style={{ marginTop: 20 }}>
          <TheQueryForm ref={(ref) => this.queryFormRef = ref} show={form_show} option={searchOption}
            onGetValues={(values) => this.onFormSearch(values)}
            onReset={(values) => this.onReset(values)} />
        </div>
        <TheTable
          scroll={{ x: "max-content", y: '61vh' }}
          columns={columns}
          dataSource={dataSource}
        />
        <ThePagination
          pageNo={pageNo}
          pageSize={pageSize}
          total={total}
          pageChange={this.pageChange}
        />
        <TheDialog
          title={<div> <ExclamationCircleFilled style={{ color: "#FAAD14", marginRight: 10 }} />  输入回复内容  </div>}
          footer={null}
          visible={replyEvaluationVisible}
          width={400}
          handleCancel={this.replyEvaluationCancel}
        >
          <Form onFinish={this.replyEvaluationSave}>
            <Form.Item name={'goodsReply'} rules={[{ required: true, message: '请输入回复内容' }]}>
              <TextArea autoSize={{ minRows: 6, maxRows: 6 }} allowClear showCount maxLength={250} />
            </Form.Item>
            <Form.Item>
              <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: -30 }}>
                <Space>
                  <Button onClick={this.replyEvaluationCancel}>取消</Button>
                  <Button htmlType="submit" type="primary">保存</Button>
                </Space>
              </div>
            </Form.Item>
          </Form>
        </TheDialog>
      </div>
    )
  }
}